<template>
	<view class="content">
		<checkbox-group class="bookshelf" :style="{paddingBottom:checkboxShow?'80px':'14px'}" @change="checkboxChange">
			<label class="bookshelf-item" v-if="item.bookshelf" v-for="(item,index) in items" :key="item.id"
				@touchend="novelTap(item)" @longpress="showSelect">
				<view class="imgWrap">
					<image class="default-cover" :data-cover="item.cover?'':'暂无封面'" :src="item.cover"
						mode="scaleToFill"></image>
					<checkbox v-if="checkboxShow" class="checkbox" :value="item._id" :checked="item.checked" />
				</view>
				<view class="title">{{item.title}}</view>
			</label>
		</checkbox-group>
		<view v-if="checkboxShow" class="button">
			<view class="common delete" @tap="deleteHandle">删除</view>
			<view class="common cancle" @tap="cancleHandle">取消</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	}
	from 'vuex'
	export default {
		data() {
			return {
				checkboxShow: false,
				selectedList: []
			}
		},
		computed: {
			items: {
				get() {
					return this.$store.getters.get_readHistory
				},
				set(val) {
					this.set_readHistory(val)
				}
			}
		},
		methods: {
			...mapMutations(['set_readHistory']),
			async novelTap(item) {
				if (this.checkboxShow) {
					return
				}
				uni.navigateTo({
					url: `/pages/public/bookContent?id=${item._id}&title=${item.title}`
				})
			},
			showSelect() {
				const self = this
				this.items = this.items.map(item => {
					item.checked = false
					return item
				})
				uni.hideTabBar({
					complete() {
						setTimeout(() => {
							self.checkboxShow = true
						}, 100)
					}
				})
			},
			checkboxChange(e) {
				this.selectedList = e.detail.value
			},
			cancleHandle() {
				const self = this
				uni.showTabBar({
					complete() {
						setTimeout(() => {
							self.checkboxShow = false
						}, 100)
					}
				})
			},
			deleteHandle() {
				let t_items = JSON.parse(JSON.stringify(this.items))
				this.selectedList.map(item => {
					let index = t_items.findIndex(child => child.id === item)
					t_items.splice(index, 1)
				})
				this.items = t_items
				this.cancleHandle()
			}
		}
	}
</script>
<style lang="scss">
	.content {
		.button {
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 66px;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.common {
				text-align: center;
				width: 50%;
				height: 100%;
				color: #FFFFFF;
				line-height: 66px;
			}

			.delete {
				background-color: #aa0000;
			}

			.cancle {
				background-color: #C0C0C0;
			}
		}

		.bookshelf {
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			padding: 0 30rpx;

			&-item {
				position: relative;
				width: 210rpx;
				margin-right: 30rpx;
				margin-top: 30rpx;

				.imgWrap {
					position: relative;
					width: 100%;
					height: 140px;
					border: 1px solid #f2f1f5;

					.checkbox {
						position: absolute;
						bottom: 5px;
						right: 5px;

						.uni-checkbox-input {
							border-radius: 50%;
						}

						.uni-checkbox-input-checked {
							background-color: #ff7c6b;
							color: #FFFFFF !important;
							border-color: #FFFFFF !important;
						}
					}
				}

				.title {
					font-size: 14px;
					display: -webkit-box;
					overflow: hidden;
					text-overflow: ellipsis;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}

				&:nth-child(3n) {
					margin-right: 0;
				}
			}
		}
	}
</style>
